<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../../set.jsp" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>用户管理平台</title>
<jsp:include page="../../cite.jsp" />
<link rel="stylesheet" href="${_path}/theme/theme-menu.css">
<link rel="stylesheet" href="${_path}/lib/datetimepicker/css/datetimepicker.min.css">
<link rel="stylesheet" href="${_path}/lib/bootstrap-select-1.10.0/css/bootstrap-select.min.css">
<script src="${_path}/lib/bootstrap-select-1.10.0/js/bootstrap-select.min.js"></script>
<script src="${_path}/lib/bootstrap-select-1.10.0/js/i18n/defaults-zh_CN.min.js"></script>
<script src="${_path}/lib/bootbox-4.4.0/bootbox.min.js"></script>
<script src="${_path}/lib/datetimepicker/js/datetimepicker.min.js"></script>
<script src="${_path}/lib/datetimepicker/js/locales/datetimepicker.zh-CN.js"></script>
<style>
.body {
	padding-top: 20px;
}

.body .panel {
	width: 700px;
	margin: 0 auto;
}

.body .panel>.panel-heading {
	padding: 0;
}

.body .panel>.panel-heading>.breadcrumb {
	margin-bottom: 0;
}

.body .panel>.panel-body {
	padding: 30px 50px 30px 0;
}

.body .input-date>input {
	cursor: pointer;
	background-color: #fff !important;
}

.body .btn-group>.active {
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da;
}
</style>
<body>
	<jsp:include page="../../header.jsp" />
	<jsp:include page="./auth-menu.jsp?active=users" />
	<div class="body">
		<div class="panel panel-default">
			<div class="panel-heading">
				<ol class="breadcrumb">
					<li>
						<a href="${user.id == null ? '' : '../'}../">用户管理</a>
					</li>
					<li class="active">${user.id == null ? '新增' : '编辑'}</li>
				</ol>
			</div>
			<div class="panel-body">
				<form class="form-horizontal" id="form">
					<div class="form-group form-group-sm">
						<label class="col-sm-2 control-label" for="user">
							<span class="text-danger">*</span>
							账号：
						</label>
						<div class="col-sm-10">
							<input class="form-control" name="user" value="${user.user}" placeholder="账号" ${user.id == null ? 'autofocus' : 'readonly'} required>
						</div>
					</div>
					<div class="form-group form-group-sm">
						<label class="col-sm-2 control-label" for="email">
							<span class="text-danger">*</span>
							邮箱：
						</label>
						<div class="col-sm-10">
							<input class="form-control" name="email" value="${user.email}" placeholder="邮箱，例如：example@163.com" required>
						</div>
					</div>
					<hr>
					<div class="form-group form-group-sm">
						<label class="col-sm-2 control-label" for="name">姓名：</label>
						<div class="col-sm-10">
							<input class="form-control" name="name" value="${user.name}" placeholder="姓名">
						</div>
					</div>
					<div class="form-group form-group-sm">
						<label class="col-sm-2 control-label" for="birthday">生日：</label>
						<div class="col-sm-10">
							<div class="input-group input-group-sm input-date">
								<input class="form-control" name="birthday" value="${user.birthday}" placeholder="出生日期，例如：1988-03-29" readonly autocomplete="off">
								<span class="input-group-btn">
									<a href="javascript:;" class="btn btn-default">
										<i class="fa fa-close"></i>
									</a>
								</span>
							</div>
						</div>
					</div>
					<div class="form-group form-group-sm">
						<label class="col-sm-2 control-label" for="sex">性别：</label>
						<div class="col-sm-10">
							<div class="btn-group btn-group-sm input-select" data-toggle="buttons">
								<c:forEach var="sex" items="${sexs}">
									<label class="btn btn-default ${user.sex.value == sex.key ? 'active' : ''}">
										<input type="radio" name="sex" value="${sex.key}" ${user.sex.value == sex.key ? 'checked' : ''}>
										${sex.value}
									</label>
								</c:forEach>
								<a href="javascript:;" class="btn btn-default">
									<i class="fa fa-close"></i>
								</a>
							</div>
						</div>
					</div>
					<hr>
					<div class="form-group form-group-sm">
						<label class="col-sm-2 control-label" for="auths">权限：</label>
						<div class="col-sm-10">
							<select class="selectpicker" id="auths" multiple>
								<c:forEach var="auth" items="${auths}">
									<c:set var="exists" value="false" />
									<c:forEach var="u_auth" items="${user.auths}">
										<c:if test="${auth.value == u_auth.value}">
											<c:set var="exists" value="true" />
										</c:if>
									</c:forEach>
									<option value="${auth.value}" ${exists ? 'selected="selected"' : ''}>${auth.name}</option>
								</c:forEach>
							</select>
						</div>
					</div>
					<hr>
					<div class="form-group row">
						<div class="col-sm-offset-2 col-sm-8">
							<a href="${user.id == null ? '' : '../'}../" class="btn btn-default btn-sm">返 回</a>
							<a href="./" class="btn btn-warning btn-sm">重 置</a>
							<button class="btn btn-primary btn-sm" data-loading-text="提交中...">${user.id == null ? '添 加' : '修 改'}</button>
						</div>
					</div>
					<input type="hidden" id="id" value="${user.id}">
				</form>
			</div>
		</div>
	</div>
	<script>
		$(function() {
			bootbox.setLocale('zh_CN');
			$('#form .input-date>input').datetimepicker({
				format : 'yyyy-mm-dd',
				initialDate : '1980-01-01',
				autoclose : true,
				language : 'zh-CN',
				weekStart : 1,
				minView : 2
			});
			$('#form .input-date>span>a.btn').bind('click', function() {
				$(this).parent().parent().children('input').val('');
			});
			$('#form .input-select>a.btn').bind('click', function() {
				$(this).parent().children('label.btn').each(function(i, n) {
					$(n).removeClass('active').children().prop('checked', false);
				});
			});
			$('#auths').selectpicker({
				style : 'btn-default btn-sm',
				actionsBox : true,
				doneButton : true
			});
			$('#form').submit(function() {
				submitClick();
				return false;
			});
			function submitClick() {
				var id = $('#id').val();
				var data = {
					user : $('#form input[name=user]').val(),
					password : $('#form input[name=password]').val(),
					email : $('#form input[name=email]').val(),
					name : $('#form input[name=name]').val(),
					sex : $('#form input[name=sex]:checked').val(),
					birthday : $('#form input[name=birthday]').val(),
					auths : $('#auths').selectpicker('val')
				};
				$('#form button[data-loading-text]').button('loading');
				$.ajax({
					url : './',
					type : 'post',
					dataType : 'json',
					contentType : 'application/json',
					data : JSON.stringify(data),
					success : function(result) {
						if (result.succ == 0)
							if (id.length == 0)
								bootbox.confirm('保存成功，密码已发送至用户邮箱。是否继续添加？', function(c) {
									if (c)
										location.reload();
									else
										location.href = '../';
								});
							else
								location.href = '../../';
						else {
							bootbox.alert(result.message);
							$('#form button[data-loading-text]').button('reset');
						}
					},
					error : function() {
						bootbox.alert('网络连接失败');
						$('#form button[data-loading-text]').button('reset');
						console.log('保存用户失败');
					}
				});
			}
		});
	</script>
</body>